<template>
  <div class="page-box h100 display-flex czbj" v-if="kcxzcdf">
    <dxtable
      v-if="xxcsd"
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      ref="databale"
      czWidth="250"
      @getlistId="getlistId"
      :czFun="czFun"
      :fixed="true"
    ></dxtable>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>设置报名</div>
      </template>
      <div>
        <n-form ref="formRef">
          <n-grid :cols="24" :x-gap="20">
            <!-- <n-form-item-gi span="12" label="总课时">
              <n-input
                type="text"
                placeholder="总课时"
                v-model:value="formsdr.zks"
              />
            </n-form-item-gi> -->
            <n-form-item-gi span="12" label="报名时间">
              <n-date-picker
                type="datetimerange"
                clearable
                v-model:value="kxczxcet"
              />
            </n-form-item-gi>
          </n-grid>
        </n-form>
        <div class="fz16 z3">设置分班</div>
        <div class="cxvcxvdfgtryy">
          <n-dynamic-input
            v-model:value="customValue"
            :on-create="onCreate"
            show-sort-button
          >
            <template #default="{ value }">
              <div style="width: 600px">
                <n-row gutter="12">
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.fzbh"
                      type="text"
                      placeholder="分组编号"
                    />
                  </n-col>
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.bmrs"
                      type="text"
                      placeholder="报名人数"
                    />
                  </n-col>
                  <n-col :span="6">
                    <n-select v-model:value="value.ls" :options="kcxdsr" />
                  </n-col>
                  <n-col :span="6">
                    <n-input
                      v-model:value="value.js"
                      type="text"
                      placeholder="教室"
                    />
                  </n-col>
                </n-row>
              </div>
            </template>
          </n-dynamic-input>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 关闭 </n-button>
          <n-button type="primary" class="ml20" @click="baocunsd">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost, transferHm } from "../../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
const databale = ref();
const kcxdsr = ref([]);
const kxczxcet = ref(null);
let njid = ref();
const kxxzcre = ref([]);
const formsdr = ref({
  zks: "",
});
const customValue = ref([
  {
    fzbh: "",
    bmrs: 60,
    ls: "",
    js: "",
  },
]);
const onCreate = () => {
  return {
    fzbh: "",
    bmrs: 60,
    ls: "",
    js: "",
  };
};
const xxcsd = ref();
const jxcxr = ref(false);
const initeer = () => {
  databale.value.initDataExpose();
};
const ksjddfd = ref([]);
const jxcxfd = ref([]);
const kcxzcdf = ref(false);
const router = useRouter();
const kcxzcdsf = ref([]);
const fdfdsgta = ref([]);
const showModal = ref(false);
const kcids = ref();
const kcid = ref();
const jigouId = ref();
let dataJson = [
  {
    title: "学校名称",
    key: "xxid",
    type: "select",
    options: [],
    width: "",
    search: true,
    render(row) {
      try {
        return ksjddfd.value.filter((a) => a.value == row.xxid)[0].label;
      } catch (e) {
        return "";
      }
    },
  },
  {
    title: "课程名称",
    key: "name",
    width: "",
    search: true,
  },
  {
    title: "上课老师",
    key: "skls",
    type: "select",
    options: [],
    width: "",
    render: (row) => {
      let jxcdfed = [];
      try {
        const kxcxdf = JSON.parse(row.fbjson);
        jxcdfed = [];
        kxcxdf.map((a) => {
          jxcdfed.push(
            h(
              NTag,
              { type: "success", class: "fz12 ml5 mr5" },
              kcxdsr.value.filter((b) => b.value == a.ls)[0].label
            )
          );
        });
      } catch (e) {
        console.log(e);
      }
      return jxcdfed;
    },
  },
  {
    title: "已报名",
    key: "bmrs",
    width: "",
    search: false,
    render: (row) => {
      try {
        return kcxzcdsf.value.filter((a) => a.idname == row.id)[0].value;
      } catch (e) {
        return 0;
      }
    },
  },
  {
    title: "课时",
    key: "keshi",
    type: "select",
    search: true,
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "第三节课",
        value: "第三节课",
      },
      {
        label: "第四节课",
        value: "第四节课",
      },
    ],
    width: "",
    render: (row) => {
      let jxcrr = JSON.parse(JSON.stringify(row.keshi));
      try {
        row.keshi = row.keshi.split(",");
      } catch (e) {}
      return jxcrr;
    },
  },
  {
    title: "收费标准",
    key: "sfbz",
    width: "",
  },
  {
    title: "上课时间",
    key: "sksj",
    width: "",
    render: (row) => {
      try {
        row.zouqi = row.zouqi.split(",");
      } catch (e) {}
      try {
        return transferHm(row.sksj) + "~" + transferHm(row.sksjjs);
      } catch (e) {
        return "--";
      }
    },
  },
  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "123456", //删除
  EditPermissionIdentifier: "", // 编辑
  NewPermissionIdentifier: "ccurriculumxz222", // 新建
  ViewPermissionID: "ccurriculumck", // 查看
};
const xxid = localStorage.xxid;
const portUrl = ref("courseManagement/xnkc/xnkc");

let formJson = reactive([
  {
    title: "课程名称",
    type: "input",
    val: "",
    span: 12,
    key: "name",
    istable: true,
    required: true,
  },
  // {
  //   title: "上课老师",
  //   type: "select",
  //   options: [],
  //   val: "",
  //   span: 12,
  //   key: "skls",
  //   istable: true,
  //   required: false,
  // },
  {
    title: "课时",
    key: "keshi",
    type: "checkbox",
    options: [
      {
        label: "第三节课",
        value: "第三节课",
      },
      {
        label: "第四节课",
        value: "第四节课",
      },
    ],
    val: "第三节课",
  },
  {
    title: "收费标准",
    key: "sfbz",
    type: "input",
    val: "",
  },
  {
    title: "上课开始时间",
    key: "sksj",
    type: "time",
    val: new Date().getTime(),
  },
  {
    title: "上课结束时间",
    key: "sksjjs",
    type: "time",
    val: new Date().getTime() + 1000 * 60 * 60 * 2,
  },

  // {
  //   title: "年级",
  //   type: "select",
  //   options: [],
  //   val: "",
  //   icon: "dx-shurukuang",
  //   span: 12,
  //   key: "nianji",
  //   width: "",
  //   search: false,
  //   istable: true,
  //   required: true,
  // callBack: async ({ value }, model) => {
  //   const { data }: any = await dxget("courseManagement/erqi/geynhsd", {
  //     xxid: xxid,
  //     nianjiid: value,
  //   });
  //   formJson[8].options = data;
  //   formJson[8].ishide = false;
  // },
  // },
  // {
  //   ishide: true,
  //   title: "班级",
  //   type: "select",
  //   options: jxcxfd,
  //   val: "",
  //   icon: "dx-shurukuang",
  //   span: 12,
  //   key: "banji",
  //   width: "",
  //   search: false,
  //   istable: true,
  //   required: false,
  // },
  {
    title: "上课周期",
    key: "zouqi",
    type: "checkbox",
    span: 24,
    options: [
      {
        label: "周一",
        value: "周一",
      },
      {
        label: "周二",
        value: "周二",
      },
      {
        label: "周三",
        value: "周三",
      },
      {
        label: "周四",
        value: "周四",
      },
      {
        label: "周五",
        value: "周五",
      },
    ],
    val: "",
  },

  {
    title: "",
    type: "",
    val: xxid,
    span: 24,
    key: "xxid",
    istable: true,
    required: true,
  },
]);

// 获取字典内容
const xtgxxmflzzxer = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd/getzdJsList?ids=316");
  fdfdsgta.value = data[0];
  // formJson[5].options = data[0];
  kcxzcdf.value = true;
};
xtgxxmflzzxer();

// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget("courseManagement/api/geytnxfList", {
    xxid: localStorage.xxid,
  });
  console.log(data);
  // formJson[1].options = data;
  dataJson[1].options = [
    {
      label: "全部",
      value: "",
    },
    ...data,
  ];
  kcxdsr.value = data;
  xxcsd.value = true;
};
xtgxxmfl();

// const bjfun = async (row) => {
//   if (row.nianji) {
//     const { data }: any = await dxget("courseManagement/erqi/geynhsd", {
//       xxid: xxid,
//       nianjiid: row.nianji,
//     });
//     formJson[8].options = data;
//   }
// };

const czFun = {
  fun: (row, loading) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            formsdr.value = row;
            kxczxcet.value = null;
            customValue.value = [
              {
                fzbh: "",
                bmrs: 60,
                ls: "",
                js: "",
              },
            ];

            if (row.bmstartTime) {
              kxczxcet.value = [row.bmstartTime, row.bmendTime];
            }
            if (row.fbjson) {
              try {
                customValue.value = JSON.parse(row.fbjson);
              } catch (e) {}
            }
          },
        },
        "设置报名"
      ),
    ];
  },
};
const baocunsd = async () => {
  if (kxczxcet.value) {
    formsdr.value.bmstartTime = kxczxcet.value[0];
    formsdr.value.bmendTime = kxczxcet.value[1];
  }
  formsdr.value.fbjson = JSON.stringify(customValue.value);
  const data = await dxpost("courseManagement/xnkc/xnkc", formsdr.value, "put");
  showModal.value = false;
  window.$message.success("操作成功！");
};

const getlistId = async (ids) => {
  const { data }: any = await dxget("courseManagement/erqi/kecsrkmxcdf", {
    xczxda: ids,
  });
  kcxzcdsf.value = data;
  console.log(data);
};

const getabanji = async () => {
  const { data }: any = await dxget(
    "courseManagement/banji/banji?xxid=6&page=1&pageSize=999"
  );
  console.log(data.data);
  kxxzcre.value = data.data;
};
getabanji();
const getschoolManagement = async () => {
  const { data }: any = await dxget(
    "courseManagement/erqi/getschoolManagement"
  );
  ksjddfd.value = data;
  dataJson[0].options = [
    {
      label: "全部",
      value: "",
    },
    ...data,
  ];
};
getschoolManagement();
</script>
<style scoped></style>
